import React, { Component } from 'react';

import { Image, StyleSheet, Text, TouchableHighlight, View, Dimensions} from 'react-native';
import { scaleSize, scaleFontSize } from '../util/size';

interface Iprops {
    handleClick?: Function | null,
    icon?: string | any,
    text: string 
}

const {width, height} = Dimensions.get('window');

export default class ListItem extends Component<Iprops, any> {
    constructor(props: Iprops) {
        super(props);
    }

    handleClick = () => {
        if (this.props.handleClick) {
            this.props.handleClick();
        }
    }

    render() {
        return (
            <View>
                <TouchableHighlight onPress={this.handleClick} >
                    <View style={styles.container}>
                        <Image style={styles.icon} source={this.props.icon} />
                        <View style={styles.menuContainer}>
                            <Text style={styles.menuText}>{this.props.text}</Text>
                        </View>
                    </View>
                </TouchableHighlight>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        width: scaleSize(331),
        height: scaleSize(68),
        flexDirection: 'row',
        backgroundColor: '#FFFFFF',
        alignItems: 'center',
        paddingTop: scaleSize(16),
        paddingBottom: scaleSize(16),
        borderBottomWidth: 1,
        borderBottomColor: '#F2F2F2',
    },
    icon: {
        width: scaleSize(30),
        height: scaleSize(30),
    },
    menuContainer: {
        paddingLeft: 15,
        paddingRight: 15,
    },
    menuText: {
        fontFamily: 'PingFangSC-Regular',
        fontSize: scaleFontSize(12),
        color: '#9B9B9B',
        lineHeight: scaleSize(20),
        paddingLeft: scaleSize(27),
    },
    arrow: {
        textAlign: 'right',
        flex: 1
    }
});
